<template>
  <div class="main">
    <h1>我是 child-a组件</h1>

    <div>原始写法: {{ this.$store.state.count }}</div>

    <div>写法一: {{ $store.state.count }}</div>
    <div>简单写法 写法二: {{ count }}</div>

    <button @click="addCount(100)">
      点击改变 state 里面count 的值 让 count 加加
    </button>

    <!-- // 方法三  -->
    <button @click="increment(1000)">count 加加2</button>

    <hr />

    <button @click="asyncAddCount">点击按钮 触发 异步的actions 方法</button>

    <!-- 方法三 -->
    <button @click="asyncIncrement">点击按钮 触发 异步的actions 方法三</button>

    <hr />

    <div style="border:2px solid red">
      <h1>展示 getters 里面的代码</h1>

      <!-- vue-cli  必须要写key  -->
      <ul>
        <li v-for="item in $store.state.list" :key="item">
          {{ item }}
        </li>
      </ul>

      <hr />

      <!-- 原始用法 -->
      <ul>
        <li v-for="item in $store.getters.filterList" :key="item">
          {{ item }}
        </li>
      </ul>

      简单用法 一
      <ul>
        <li v-for="item in filterList1" :key="item">
          {{ item }}
        </li>
      </ul>

      简单用法 二
      <ul>
        <li v-for="item in filterList" :key="item">
          {{ item }}
        </li>
      </ul>


      <button @click="$store.commit('changeUserToken2')">点击改变 user token </button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: "",
  data() {
    return {};
  },
  watch: {},
  props: {},
  components: {},
  computed: {
    //   count() {
    //       return   this.$store.state.count
    //   }
    ...mapState(["count"]), //  mapState

    filterList1() {
      return this.$store.getters.filterList;
    },

    ...mapGetters(["filterList"])
  },
  mounted() {
    console.log(this.$store);
  },
  methods: {
    // 同步执行 Mutations 方法
    ...mapMutations(["increment"]),
    ...mapActions(["asyncIncrement"]),
    addCount(data) {
      //   this.$store.commit('方法名字')
      // 方法一
      this.$store.commit("increment",data);
      // 方法二
      // this.increment()
    },

    // 执行 actions里面的代码
    asyncAddCount() {
      //  this.$store.dispatch('actions里面的方法 asyncIncrement  ')
      //方法一
      // this.$store.dispatch('asyncIncrement')
      // 方法二
      this.asyncIncrement();
    }
  },
  filters: {}
};
</script>

<style scoped lang="css"></style>
